<template>
  <div class="city_body">
    <!-- <div class="city_list">
      <div class="city_hot">
        <h2>热门城市</h2>
        <ul class="clearfix">
          <li>上海</li>
        </ul>
      </div>
      <div class="city_sort">
        <div>
          <h2>A</h2>
          <ul>
            <li>阿拉善盟</li>
            <li>鞍山</li>
            <li>安庆</li>
            <li>安阳</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="city_index">
      <ul>
        <li>A</li>
      </ul>
    </div>-->
    <div class="city_list">
      <loading v-if="flag"></loading>
      <Scroll v-else ref="city_list">
        <!-- btee-srcoll 里面只针对 里面的一个子节点当有2个子节点的时候 会出现问题的 只能针对一个整体滑动 -->
        <div>
          <!-- 热门城市 -->
          <div class="city_hot">
            <h2>热门城市</h2>
            <ul class="clearfix">
              <!-- 传递点击事件 改变state里面vuex的值 -->
              <li v-for="item in hotList" :key="item.id" @tap="handleToCity(item.nm, item.id)">{{item}}</li>
            </ul>
          </div>
          <!-- 分区城市 -->
          <div class="city_sort" ref="city_sort">
            <div v-for="item in cityList" :key="item.index">
              <h2>{{item.index}}</h2>
              <ul>
                <li v-for="itemlist in item.list" :key="itemlist.id" @tap="handleToCity(itemlist.nm, itemlist.id)">{{itemlist.nm}}</li>
              </ul>
            </div>
          </div>
        </div>
      </Scroll>
      <!-- 跳转城市 -->
      <div class="city_index">
        <ul>
          <!-- 触摸点击事件 -->
          <li v-for="(item,i) in cityList" :key="i" @touchstart="handleToIndex(i)">{{item.index}}</li>
        </ul>
      </div>-
    </div>
  </div>
</template>

<script>
import { getmoviecity } from "network/movie";
//不是全局注册的话就要这样
import Scroll from "components/Srcoll/srcoll";
import loading from "components/Loading";

export default {
  name: "City",
  components: {
    Scroll,
    loading,
  },
  // mounted() {this.getmoviecity()},
  data() {
    return {
      //实现响应式数据
      cityList: [],
      hotList: [],
      // 默认是true 加载的时候显示
      flag: true,
    };
  },
  methods: {
    //获取城市数据
    getmoviecity() {
      var cityList = window.localStorage.getItem("cityList");
      var hotList = window.localStorage.getItem("hotList");

      //通过if判断 同时存储就说明本地有了就不发送请求了 直接从本地取
      if (cityList && hotList) {
        this.cityList = JSON.parse(cityList);
        this.hotList = JSON.parse(hotList);
        this.flag = false; //
      } else {
        getmoviecity().then((res) => {
          // console.log(res);
          //状态码404 接口失败没有数据  假设有数据
          var msg = res.msg;
          if (msg === "ok") {
            this.flag = false; //加载完成后false关闭
            var data = res.data.cities;
            //目标数据格式
            // [{index:'A',list:[{nm:'xx',id:123}]}]
            var { cityList, hotList } = this.formatCityList(data);
            this.cityList = cityList;
            this.hotList = hotList;
            //进行本地存储  不破坏数组结构 就需要把数组转成字符串 之后在通过 获取的时候 转成数组获取
            window.localStorage.setItem("cityList", JSON.stringify(cityList));
            window.localStorage.setItem("hotList", JSON.stringify(hotList));
          }
        });
      }
    },
    //数据结构的改造  原生js
    formatCityList(cities) {
      //定义数据存储
      var cityList = [];
      var hotList = [];

      //热门城市的获取 等于1 就是热门城市的
      for (var i = 0; i < cities.length; i++) {
        if (cities[i].isHot === 1) {
          hotList.push(citiesp[i]);
        }
      }

      // 通过for循环进行 index的数据添加  先获取到城市的首字母出来 通过字符串的截取和首字母的实现
      for (var i = 0; i < cities.length; i++) {
        var firstLetter = cities[i].py.substring(0, 1).toUpperCase(); //都得到大写首字母
        if (toCom(firstLetter)) {
          //方法true 那就是没有重复的就新添加index push到数组里面
          cityList.push({
            index: firstLetter,
            list: [{ nm: cities[i].nm, id: cities[i].id }],
          });
        } else {
          //重复的 累加到已有index中 就是push 包含a开头比如
          for (var j = 0; j < cityList.length; j++) {
            //判断新增数组里面的index值是否相等就添加
            if (cityList[i].index === firstLetter) {
              cityList[j].list.push({ nm: cities[i].nm, id: cities[i].id });
            }
          }
        }
      }
      // 通过sort方法进行排序
      cityList.sort((n1, n2) => {
        if (n1.index > n2.index) {
          return 1;
        } else if (n1.index < n2.index) {
          return -1;
        } else {
          return 0;
        }
      });

      //判断是否已经存在来影响以上push添加
      function toCom(firstLetter) {
        for (var i = 0; i < cityList.length; i++) {
          if (cityList[i].index === firstLetter) {
            //存在就方法false 不进行新添加
            return false;
          }
        }
        //不存在就方法true 进行新增index
        return true;
      }

      return { cityList, hotList };
    },
    //点击跳转到指定的城市 就是没有过度效果
    handleToIndex(i) {
      //改变滚动条的位置 要获取到指定的位置 之后进行跳转
      var h2 = this.$refs.city_sort.getElementsByTagName("h2");
      // this.$resf.city_sort.parentNode.scrollTop = h2[i].offsetTop; //h2找到后 就找到 和索引一一对应关系 此时被插件包裹了失效了
      this.$refs.city_list.toScrollTop(-h2[i].offsetTop);
    },

    //点击添加对应的城市修改
    handleToCity(nm,id) {
      // 通过commit来进行修改  city文件夹下的
      this.$store.commit('city/CITY_INFO',{nm,id})
      // 再次刷新之后 应该是记录里当前的状态还是不是上一次的选择过的 可以利用本地 存储存储和获取
      window.localStorage.setItem('nowNm',nm);
      window.localStorage.setItem('nowId',id);
      //跳转到正在热映界面
      this.$router.push('/movie/nowPlaying')
      
    }
  },
};
</script>

<style scoped>
#content .city_body {
  z-index: 999;
  height: 100%;
  margin-top: 45px;
  display: flex;
  width: 100%;
  position: relative;
  top: 0;
  bottom: 0;
}
.city_body .city_list {
  flex: 1;
  overflow: auto;
  background: #fff5f0;
}
.city_body .city_list::-webkit-scrollbar {
  background-color: transparent;
  width: 0;
}
.city_body .city_hot {
  margin-top: 20px;
}
.city_body .city_hot h2 {
  padding-left: 15px;
  line-height: 30px;
  font-size: 14px;
  background: #f0f0f0;
  font-weight: normal;
}
.city_body .city_hot ul li {
  float: left;
  background: #fff;
  width: 29%;
  height: 33px;
  margin-top: 15px;
  margin-left: 3%;
  padding: 0 4px;
  border: 1px solid #e6e6e6;
  border-radius: 3px;
  line-height: 33px;
  text-align: center;
  box-sizing: border-box;
}

.city_body .city_sort div {
  margin-top: 20px;
}
.city_body .city_sort h2 {
  padding-left: 15px;
  line-height: 30px;
  font-size: 14px;
  background: #f0f0f0;
  font-weight: normal;
}
.city_body .city_sort ul {
  padding-left: 10px;
  margin-top: 10px;
}
.city_body .city_sort ul li {
  line-height: 30px;
  line-height: 30px;
}
.city_body .city_index {
  width: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  border-left: 1px #e6e6e6 solid;
}
</style>